<template>
  <div class="form">
    <div class="title">在线签到</div>
    <div class="group">
      <input
        type="tel"
        placeholder="请输入报名电话"
        maxlength="11"
        v-model="state.mobile"
        @input="telInput"
      />
    </div>
    <div class="group">
      <select @change="nameSelect">
        <option value="" v-if="state.nameData.length == 0">
          请填写小孩姓名
        </option>
        <template v-else>
          <option
            :value="item.name"
            :key="index"
            v-for="(item, index) in state.nameData"
          >
            {{ item.name }}
          </option>
        </template>
      </select>
    </div>
    <button class="submit" @click="submit" :disabled="btnDidabled">签到</button>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import ajax from "../../util/http";
import { reactive, watch, ref, getCurrentInstance } from "vue";
import form from "../../util/validator";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const btnDidabled = ref(false);
const open_id = localStorage.getItem("open_id");

const state = reactive({
  cid: route.query.cid, //剧组id
  mobile: "",
  name: "",
  nameData: [],
});
//获取被wx打乱后的url的query
const getQueryString = (name) => {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
};

if (!open_id) {
  router.push({
    path: "/author",
    query: {
      cid: route.query.cid,
    },
  });
}

watch(
  () => state.mobile,
  (mobile, prevMobile) => {
    state.mobile = mobile.replace(/\D/g, "");
  }
);

const nameSelect = (e) => {
  state.name = e.target.value;
};

const telInput = (e) => {
  if (e.target.value.length == 11) {
    ajax
      .post("/star/scene/stars", {
        cid: state.cid,
        mobile: state.mobile,
      })
      .then((res) => {
        if (res.code == 1) {
          state.nameData = res.data;
          state.name = res.data[0].name;
        }
      });
  }
};

const submit = () => {
  let data = {
    mobile: state.mobile,
    name: state.name,
  };
  let rules = [
    {
      name: "mobile",
      rule: ["required", "isMobile"],
      msg: ["请输入报名电话", "请输入正确的手机号"],
    },
    {
      name: "name",
      rule: ["required"],
      msg: ["请选择小孩姓名"],
    },
  ];
  let checkForm = form.validation(data, rules);
  if (!checkForm) {
    btnDidabled.value = true;
    setTimeout(() => {
      btnDidabled.value = false;
    }, 2000);
    ajax
      .post("/star/scene/checkin", {
        cid: state.cid,
        name: state.name,
        mobile: state.mobile,
        open_id: open_id,
      })
      .then((res) => {
        if (res.code == 1) {
          if (res.msg == "已签到，勿重复签到！") {
            proxy.$message({ content: res.msg });
          } else {
            router.push({
              path: "/signin/success",
              query: {
                checkin_id: res.data.checkin_id,
                checkin_stage: res.data.checkin_stage,
                checkin_no: res.data.checkin_no,
                name: state.name,
              },
            });
          }
        }
      });
  } else {
    proxy.$message({ content: checkForm });
  }
};
</script>